<template>
  <el-container>
    <el-main>
      <el-row>
        <el-col :span="22" :offset="1">
          <el-table :data="tasks" border size="mini">
            <el-table-column prop="filename" label="文件名"></el-table-column>
            <el-table-column prop="created" label="状态" width="180">
              <template slot-scope="scope">
                <span>{{$public.StatusFormat(scope.row.status)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="filesize" label="文件大小" width="180"></el-table-column>
            <el-table-column prop="packet" label="分片数" width="180"></el-table-column>
            <el-table-column prop="created" label="创建时间" width="180">
              <template slot-scope="scope">
                <span>{{$public.comTime(scope.row.created)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="created" label="操作" width="180">
              <template slot-scope="scope">
                <el-button type="text" @click="showlog(scope.row.id)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
            :small="true"
              background
              :page-size="pageSize"
              :page-count="currentPage"
              layout="prev, pager, next"
              @current-change="current_change"
              :total="total"
            ></el-pagination>
          </div>
        </el-col>
      </el-row>

      <el-dialog
        title="Yserver日志详情"
        width="40%"
        :visible.sync="showrlogdialog"
        v-if="showrlogdialog"
      >
        <showlocalstronge @close="dialogClose" :show-data="formData" />
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
import showlocalstronge from "@/components/Logs/showlocalstronge.vue";
export default {
  components: { showlocalstronge },
  data() {
    return {
      tasks: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      formData: {},
      showrlogdialog: false,
    };
  },
  methods: {
    dialogClose() {
      this.showrlogdialog = true;
    },
    showlog(id) {
      this.$http.Get(this.$api.uploadlog + "/" + id, {}, (res) => {
        this.formData = res;
        this.showrlogdialog = true;
      });
    },
    taskGet() {
      this.$http.Get(
        this.$api.uploadlogs,
        { page: this.currentPage, count: this.pageSize },
        (res) => {
          if (res) {
            this.tasks = res.data;
            this.total = res.count;
          }
        }
      );
    },
    current_change(e) {
      this.currentPage = e;
      this.taskGet();
    },
  },
  created() {
    this.taskGet();
  },
};
</script>